<template>
    <div class="own-container">
      <div class="profile-card">
        <div class="profile-header">
          <el-avatar :size="100" :src="userInfo.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
          <div class="profile-info">
            <h2>{{ userInfo.name || '未设置姓名' }}</h2>
            <p class="role">{{ formatRole(userInfo.role) }}</p>
            <p class="community">幸福小区 {{ userInfo.building || '' }}栋 {{ userInfo.unit || '' }}单元</p>
          </div>
        </div>
        
        <el-divider />
        
        <div class="profile-details">
            <el-descriptions :column="1" border>
      <el-descriptions-item label="用户ID">{{ userInfo.id || '未知' }}</el-descriptions-item>
      <el-descriptions-item label="用户名">{{ userInfo.name || '未设置' }}</el-descriptions-item>
      <el-descriptions-item label="电话号码">{{ userInfo.phone || '未设置' }}</el-descriptions-item>
      <el-descriptions-item label="角色">{{ formatRole(userInfo.role) }}</el-descriptions-item>
      <el-descriptions-item label="注册时间">{{ formatTime(userInfo.createTime) }}</el-descriptions-item>
      <el-descriptions-item label="上次登录">{{ formatTime(userInfo.lastLogin) }}</el-descriptions-item>
    </el-descriptions>
        </div>
        
        <div class="profile-actions">
          <el-button type="primary" @click="editProfile">编辑资料</el-button>
          <el-button @click="changePassword">修改密码</el-button>
        </div>
      </div>
      
      <div class="additional-info">
        <el-card class="info-card">
          <template #header>
            <div class="card-header">
              <span>我的房屋</span>
            </div>
          </template>
          <div v-if="userInfo.properties && userInfo.properties.length > 0">
            <el-table :data="userInfo.properties" style="width: 100%">
              <el-table-column prop="building" label="楼栋" width="100" />
              <el-table-column prop="unit" label="单元" width="100" />
              <el-table-column prop="room" label="房号" width="100" />
              <el-table-column prop="area" label="面积(㎡)" width="120" />
              <el-table-column prop="type" label="类型">
                <template #default="{row}">
                  {{ formatPropertyType(row.type) }}
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-else class="empty-tip">
            <el-empty description="暂无房屋信息" />
          </div>
        </el-card>
        
        <el-card class="info-card">
          <template #header>
            <div class="card-header">
              <span>家庭成员</span>
            </div>
          </template>
          <div v-if="userInfo.familyMembers && userInfo.familyMembers.length > 0">
            <el-table :data="userInfo.familyMembers" style="width: 100%">
              <el-table-column prop="name" label="姓名" width="120" />
              <el-table-column prop="relation" label="关系" width="120">
                <template #default="{row}">
                  {{ formatRelation(row.relation) }}
                </template>
              </el-table-column>
              <el-table-column prop="phone" label="电话" width="150" />
              <el-table-column prop="idCard" label="身份证号" />
            </el-table>
          </div>
          <div v-else class="empty-tip">
            <el-empty description="暂无家庭成员信息" />
          </div>
        </el-card>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElMessage, ElLoading } from 'element-plus'
  import { getUserInfo } from '@/util/request.js'
  import { useCounterStore} from '@/stores/counter.js'
  
  const router = useRouter()
  const userInfo = ref({
    id: '',
    name: '',
    phone: '',
    role: '',
    createTime: '',
    lastLogin: ''
    // 其他字段...
  })
  
  // 格式化角色显示 - 修改为业主、服务、管理员
  const formatRole = (role) => {
    const roles = {
      'admin': '管理员',
      'owner': '业主',
      'service': '服务人员',
      'staff': '物业员工' // 保留原有其他角色映射
    }
    return roles[role] || role // 如果不在映射中，直接返回原值
  }
  
  // 时间格式化函数 - 修改为更简洁的实现
  const formatTime = (time) => {
    if (!time) return '未知'
    
    try {
      const date = new Date(time)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      
      return `${year}-${month}-${day} ${hours}:${minutes}`
    } catch (e) {
      console.error('时间格式化错误:', e)
      return time // 如果解析失败，返回原始时间字符串
    }
  }
  const counterStore = useCounterStore()
  // 获取用户信息
  const fetchUserInfo = async () => {
    const userId = JSON.parse(counterStore.userInfo).id
    if (!userId) {
      ElMessage.error('未获取到用户ID，请重新登录')
      router.push({ name: 'login' })
      return
    }
    
    const loading = ElLoading.service({
      lock: true,
      text: '加载中...',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    
    try {
      const response = await getUserInfo(userId)
      if (response.data && response.data.code === 200) {
        userInfo.value = response.data.data
      } else {
        ElMessage.error(response.data?.message || '获取用户信息失败')
      }
    } catch (error) {
      console.error('获取用户信息出错:', error)
      ElMessage.error('获取用户信息失败，请稍后重试')
    } finally {
      loading.close()
    }
  }
  
  onMounted(() => {
    fetchUserInfo()
  })
  </script>
  
  
  <style scoped>
  .own-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .profile-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
  }
  
  .profile-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .profile-info {
    margin-left: 20px;
  }
  
  .profile-info h2 {
    margin: 0;
    font-size: 24px;
    color: #333;
  }
  
  .profile-info .role {
    margin: 5px 0;
    color: #666;
    font-size: 14px;
  }
  
  .profile-info .community {
    margin: 5px 0;
    color: #409EFF;
    font-size: 14px;
  }
  
  .profile-details {
    margin: 20px 0;
  }
  
  .profile-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
  }
  
  .additional-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 20px;
  }
  
  .info-card {
    border-radius: 8px;
  }
  
  .card-header {
    font-weight: bold;
    font-size: 16px;
  }
  
  .empty-tip {
    padding: 20px 0;
  }
  
  @media (max-width: 768px) {
    .profile-header {
      flex-direction: column;
      text-align: center;
    }
    
    .profile-info {
      margin-left: 0;
      margin-top: 15px;
    }
    
    .additional-info {
      grid-template-columns: 1fr;
    }
  }
  </style>